import { useState, createRef, useRef, Component } from "react";

function App05() {
	const [_, setData] = useState(); //用于有意触发更新dom
	const dataCRef = createRef();
	const dataURef = useRef(30);
	const onClick2 = () => {
		console.log("data cref:", dataCRef, dataCRef.current);
		console.log("data uref:", dataURef, dataURef.current);
		dataCRef.current += 1;
		dataURef.current += 1;
		setData(dataURef.current);
		/* 如果此处setData传入一个常量，会发生一个有趣的现象: console出来的dataCref和dataUref都发生了变化, 其实这是因为dom没有发生渲染，App05函数没有重新执行，dataCref和dataUref的值都保留了下来*/
		//setData(12);
	};
	console.log("render");
	return (
		<div className="App">
			<div>
				<h2>用于保存数据时的差别:</h2>
				<div>createRef和Ref的区别</div>
				data createRef: <input value={dataCRef.current} />
				<br />
				data useRef: <input value={dataURef.current} />
				<button onClick={onClick2}>请点击</button>
			</div>
		</div>
	);
}

export default App05;
